<template>
  <div>
    <el-dialog ref="dialog" :title="setTitle" :visible.sync="showDialog" width="50%" @close="closeDialog" :close-on-click-modal="false" :close-on-press-escape="false">
      <el-form @submit.native.prevent ref="form" :model="form" :rules="rules" size="small" label-position="right" label-width="110px" >
        <el-form-item :label="$root.lang.control.group.create.groupName" prop="groupName">
          <el-input v-model="form.groupName"></el-input>
        </el-form-item>
        <el-form-item :label="$root.lang.control.group.create.groupDesc" prop="groupDesc">
          <el-input type="textarea" v-model="form.groupDesc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="dialog-btn"  type="primary" :loading=loading  @click="onSubmit('form')">{{ $root.lang.control.group.create.confirm }}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      init: false,
      loading: false,
      showDialog: this.show,
      form: {
        groupName: '',
        groupDesc: '',
      },
      rules: {
        groupName: [{ required: true, message: this.$root.lang.control.group.create.rule.groupName, trigger: 'blur' }],
        groupDesc: [{ required: false, message: '', trigger: 'blur' }],
      },
    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
  },
  watch: {
    show: function (value) {
      if(this.$refs['form']) this.$refs['form'].resetFields()
      this.showDialog = value
    },
  },
  computed: {
    setTitle() {
      return (this.editData) ?  this.$root.lang.control.group.create.editTitle : this.$root.lang.control.group.create.title
    },
    isEdit() {
      return false
    }
  },
  methods: {
    closeDialog() {
      this.$emit('editReceive',{
        key: 'showEdit',
        value: this.showDialog
      })
    },
    onSubmit(formName) {
      let base = this
      var flag = true

      base.$refs[formName].validate((valid) => {
        if (!valid) {
          flag = false
          return false
        }
      })
      if(flag) {
        base.doCreate()
      }
    },
    doCreate() {
      let base = this
      base.loading = true

      base.request({
        url: '/device/group/insert',
        method: 'post',
        data: base.$root.optionProcess(base.form)
      }).then(response => {
        base.loading = false
        base.showDialog = false
        base.$emit('reload')
        base.$message({
          message: this.$root.lang.confirm.addSuccess,
          type: 'success',
          duration: 3 * 1000,
        })
      }).catch(error => {
        base.loading = false
        base.$message({
          message: error.errmsg,
          type: 'error',
          duration: 3 * 1000
        })
      })
    },
  },
  created() {
    var lett = this;
    document.onkeydown = function(e) {
      var key = window.event.keyCode;
      var button = document.querySelector('.dialog-btn')
      if(!button) return
      if (key == 13) {
        lett.onSubmit('form')
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

</style>